<template>
  <div>
    <div class="container">
      <!--搜索框-->
      <div class="seach-container">
        <input type="text" class="seach-input" v-model="queryVo.telephoneNo" />
        <div class="seach-button" @click="queryOrders">查询订单</div>
      </div>

      <!--订单列表-->
      <div style="margin-top: 78px;">
        <el-table :data="orderList" border style="width: 100%;height: 400px;" stripe @row-click="selectorder">
          <el-table-column prop="No" label="单号"> </el-table-column>
          <el-table-column prop="beginTime" label="下单时间"> </el-table-column>
          <el-table-column prop="price" label="费用（元）"> </el-table-column>
          <el-table-column prop="adminStatusName" label="状态"> </el-table-column>
        </el-table>
      </div>
    </div>

    <!--订单详情-->
    <el-dialog title="订单详情" :visible.sync="OrderDialogVisible" width="45%" center top="2%">
      <div class="info-title border-l">
        订单信息
      </div>
      <ul class="order-content">
        <li><label class="label-title">设备型号：</label>{{selectOrder.modelName}}</li>
        <li><label class="label-title">订单编号：</label>{{selectOrder.orderNo}}</li>
        <li><label class="label-title">下单时间：</label>{{selectOrder.createTime}}</li>
      </ul>

      <div class="info-title border-l">
        维修信息
      </div>
      <ul class="order-content">
        <li><label class="label-title">联系人：</label>{{selectOrder.orderElement.customerName}}</li>
        <li><label class="label-title">服务电话：</label>{{selectOrder.orderElement.telephoneNo}}</li>
        <li><label class="label-title">所在地区：</label>
          {{selectOrder.orderElement.province}}
          {{selectOrder.orderElement.county}}
        </li>
        <li><label class="label-title">详细地址：</label>{{selectOrder.orderElement.address}}</li>
        <li><label class="label-title">服务方式：</label>{{selectOrder.serviceName}}</li>
        <li><label class="label-title">备 注：</label>{{selectOrder.remark}}</li>
      </ul>

      <div class="info-title"> </div>
      <ul class="order-content">
        <li><label class="label-title">订单金额：</label>￥{{selectOrder.price}}</li>
        <li><label class="label-title">状 态：</label>{{selectOrder.isCancel}}</li>
      </ul>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="OrderDialogVisible = false" style="padding:5px 8px;">关闭</el-button>
      </span>
    </el-dialog>

    <!--登录查询-->
    <el-dialog title="登录查询订单" :visible.sync="loginDialogVisible" width="25%" center top="13%">
      <el-input placeholder="请输入电话号码" v-model="queryVo.telephoneNo" style="margin-bottom:18px;">
        <i slot="prefix" class="el-input__icon el-icon-phone"></i>
      </el-input>
      <el-input placeholder="请输入验证码" v-model="queryVo.vcode" class="border-info">
        <i slot="prefix" class="el-input__icon el-icon-bell"></i>
        <template slot="append">
          &nbsp;
          <el-button @click="getCode" style="padding:5px 1px;" :style="{'background-color':backg_c,'color':f_color}"
            :disabled='disabled'>
            &nbsp;{{codeTips}}&nbsp;
          </el-button>
          &nbsp;
        </template>
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="getAllOrder" style="padding:5px 8px;">立即查询</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import r from '../../utils/RequestUtilcopy'
  import wxs from '../utils/WxsService'
  export default {
    name: "queryorder",
    data: function () {
      return {
        backg_c: "#0FAFEB",
        f_color: "#fff",
        queryVo: {
          telephoneNo: "",
          vcode: ""
        },
        orderList: [],
        OrderDialogVisible: false,
        selectOrder: {
          orderElement: {}
        },
        loginDialogVisible: false,
        codeTips: "获取验证码",
        timeTotal: 60,
        disabled: false
      }
    },
    methods: {
      setCookie(name, value, time) {
        let strsec = time * 60 * 1000;
        let exp = new Date();
        exp.setTime(exp.getTime() + strsec * 1);
        document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
      },
      getCookie(name) {
        let arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
        if (arr = document.cookie.match(reg))
          return unescape(arr[2]);
        else
          return null;
      },
      //表单展示所有故障
      Allfault(row, column) {
        let allf = '';
        for (let item of row.orderFailures) {
          allf += item.failureSubName + ";";
        }
        return allf;
      },
      //通过电话号码查询订单
      queryOrders() {
        let phoneNo = this.getCookie('phoneNo');
        this.AllOrderInfo(phoneNo);
      },
      //选择单条订单
      selectorder(row, event, column) {
        this.selectOrder = row;
        this.OrderDialogVisible = true;
      },
      //获取cookie
      getCookie(name) {
        let arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
        if (arr = document.cookie.match(reg))
          return unescape(arr[2]);
        else
          return null;
      },
      //获取验证码
      getCode() {
        if (this.queryVo.telephoneNo == null || this.queryVo.telephoneNo == "") {
          r.message("请输入电话号码", "error")
          return;
        }
        if (!(/^1[345678]\d{9}$/.test(this.queryVo.telephoneNo))) {
          r.message("请您输入正确的手机号", "error");
          return;
        }
        this.backg_c = "#eee";
        this.f_color = "#999";
        this.disabled = true;
        this.timeCount();
      },
      //获取订单
      getAllOrder() {
        if (this.queryVo.telephoneNo == null || this.queryVo.telephoneNo == "") {
          r.message("请输入电话号码", "error")
          return;
        }
        if (!(/^1[345678]\d{9}$/.test(this.queryVo.telephoneNo))) {
          r.message("请您输入正确的手机号", "error");
          return;
        }
        if (this.queryVo.vcode === '' || this.queryVo.vcode === null) {
          r.toast("请填写验证码");
          return;
        }
        if (this.getCookie('getVode') != null) {
          if (this.queryVo.vcode !== this.getCookie('getVode')) {
            r.message("验证码不正确", "error");
            return;
          }
        } else {
          r.message("请重新获取验证码", "error");
          return;
        }
        this.setCookie('phoneNo', this.queryVo.telephoneNo, 3 * 60);
        this.AllOrderInfo(this.queryVo.telephoneNo);
        this.loginDialogVisible = false;
      },
      timeCount() {
        if (this.timeTotal > 0) {
          this.timeTotal--;
          this.codeTips = "重新发送(" + this.timeTotal + "s)";
        }
        let self = this;
        this.timer = setTimeout(function () {
          if (self.timeTotal === 0) {
            self.disabled = false;
            self.codeTips = "获取验证码";
            self.f_color = '#fff';
            self.backg_c = "#0FAFEB"
            self.timeTotal = 60;
            clearTimeout(self.timer);
          } else {
            self.timeCount();
          }
        }, 1000);
      },
      //获取订单接口
      AllOrderInfo(phoneNo) {
        this.orderList = wxs.getOnOrderDetail([{
          phoneNo: this.queryVo.telephoneNo
        }]);
      }
    },
    created: function () {
      let phoneNo = this.getCookie('phoneNo');
      this.AllOrderInfo(phoneNo);
    }
  }

</script>

<style scoped="scoped">
  @import url("./assets/css/index.css");

  .container {
    min-height: 700px;
    margin-top: 100px;
  }

  .seach-container {
    width: 700px;
    padding-top: 60px;
    margin: 0 auto;
    display: -webkit-flex;
    /* Safari */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
  }

  .seach-input {
    height: 67px;
    width: 580px;
    border: 1px solid #4FC1E9;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    border-right: none;
    font-size: 20px;
    padding-left: 10px;
    color: #333;
  }

  .seach-button {
    width: 106px;
    height: 64px;
    line-height: 67px;
    text-align: center;
    color: #fff;
    background-color: #0FAFEB;
    font-size: 20px;
    border-top: 1px solid #4FC1E9;
    border-right: 1px solid #4FC1E9;
    border-bottom: 4px solid #079ad1;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
  }

  .order-content {
    line-height: 45px;
    color: #999;
  }

  .order-content li {
    border-bottom: 1px solid #eee;
  }

  .label-title {
    color: #333;
    padding-right: 20px;
  }

  .info-title {
    background-color: #eee;
    line-height: 45px;
    color: #999;
    height: 45px;
    padding-left: 8px;
  }

  .border-l {
    border-left: 2px solid #0FAFEB;
  }

</style>
